<template>
  <button v-ripple class="v-btn v-radius">
    <span>{{ value }}</span>
  </button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    value: {
      type: String,
      default: "按钮",
    },
  }
});
</script>

<style scoped>
.v-btn {
  height: 36px;
  padding: 0 16px;
  color: #eee;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(90deg, #0162c8, #55e7fc);
  border: none;
  outline: none;
  transition: all .25s ease-out;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}

.v-btn:hover {
  color: #fff;
  background: linear-gradient(90deg, #2d85e2, #45e6ff);
}
.v-btn:focus {
  outline: none;
}
</style>